<template>
    <div class="content">
        <Form :label-width="200" :model="form" :rules="rules" ref="form">
            <FormItem label="教师账号" prop="userName">
                <Input
                    :maxlength="10"
                    placeholder="3-10位,不可重复"
                    v-model="form.userName"
                ></Input>
            </FormItem>
            <FormItem label="教师姓名" prop="realName">
                <Input
                    :maxlength="10"
                    placeholder="请输入教师姓名"
                    autocomplete="off"
                    v-model="form.realName"
                ></Input>
            </FormItem>
            <FormItem label="登录密码" prop="userPwd">
                <Input
                    :disabled="!!form.userId"
                    v-model="pwd"
                    :maxlength="10"
                    type="password"
                    placeholder="请输入登录密码"
                    autocomplete="new-password"
                ></Input>
            </FormItem>
            <FormItem label="所属院系" prop="collegeId">
                <RemoteSearch
                    v-model="form.collegeId"
                    :list="collegeList"
                    keywordFiled="collegeName"
                    valueField="collegeId"
                    :labelFieldList="['collegeName']"
                    style="width: 200px"
                    @get-all="collegeChange"
                />
            </FormItem>
            <FormItem label="所属专业" prop="majorId">
                <RemoteSearch
                    :disabled="!form.collegeId"
                    v-model="form.majorId"
                    :list="majorList"
                    keywordFiled="majorName"
                    valueField="majorId"
                    :labelFieldList="['majorName']"
                    style="width: 200px"
                />
            </FormItem>
            <FormItem label="联系方式" prop="contacts">
                <Input
                    placeholder="请输入教师联系方式"
                    v-model="form.contacts"
                    :maxlength="12"
                ></Input>
            </FormItem>
            <FormItem>
                <div class="submit-footer">
                    <Button type="primary" @click="submit">保存</Button>
                    <Button @click="handleCancel">取消</Button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { createTeacher, updateTeacher, queryTeaInfo } from '@/api/userManage'
import { majorList } from '@/api/schoolManage'

export default {
    inject: ['nextPageReload'],
    props: {
        id: {
            default: ''
        }
    },
    data () {
        return {
            form: {
                userId: '',
                userName: '',
                realName: '',
                userPwd: '',
                contacts: '',
                collegeId: '',
                majorId: ''
            },
            rules: {
                userName: [
                    { required: true, message: '请输入教师账号', trigger: 'blur' },
                    { max: 10, min: 3, message: '3-10位,不可重复', trigger: 'change,blur' }
                ],
                realName: [
                    { required: true, message: '请输入教师姓名', trigger: 'blur' },
                    { max: 10, min: 2, message: '2-10位', trigger: 'change,blur' }
                ],
                userPwd: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (this.form.userId || value) {
                                /^.{3,10}$/.test(value) ? callback() : callback(new Error('密码3-10位, 字母数字任意组合'))
                            } else {
                                callback(new Error('登录密码必填'))
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                collegeId: [
                    { required: true, message: '请选择所属院系', trigger: 'blur' }
                ],
                majorId: [
                    { required: true, message: '请选择所属专业', trigger: 'blur' }
                ]
            },
            collegeList: []
        }
    },
    computed: {
        majorList () {
            const { collegeId } = this.form
            if (!collegeId) return []
            const target = this.collegeList.find(item => item.collegeId === collegeId)
            return (target && target.major) || []
        },
        pwd: {
            get () {
                return this.form.userId ? '********' : this.form.userPwd
            },
            set (v) {
                if (this.form.userId) return
                this.form.userPwd = v
            }
        }
    },
    mounted () {
        if (this.id) {
            this.queryInfo(this.id)
        }
        this.queryCollegeList()
    },
    methods: {
        ...mapMutations(['removeTagNav']),
        collegeChange (v) {
            this.form.majorId = ''
        },
        queryInfo (id) {
            return queryTeaInfo(id).then(res => {
                if (res.data.code === '0000') {
                    const form = this.form
                    const data = res.data.data
                    Object.keys(form).forEach(k => {
                        form[k] = data[k]
                    })
                }
            })
        },
        queryCollegeList () {
            majorList().then(res => {
                if (res.data.code === '0000') {
                    this.collegeList = res.data.data.collegeList
                } else {
                    this.$Message.error(res.data.data)
                }
            })
        },
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    const fn = this.id ? updateTeacher : createTeacher
                    fn(this.form).then(res => {
                        if (res.data.code === '0000') {
                            this.$Message.success('保存成功')
                            this.nextPageReload()
                            this.handleCancel()
                        } else {
                            this.$Message.error(res.data.data || res.data.msg)
                        }
                    })
                }
            })
        },
        handleCancel () {
            this.removeTagNav(this.$route)
            this.$router.replace({
                name: 'teaManageList'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-form {
    max-width: 800px;
}
</style>
